<template>
  <div class="dashboard-overview">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="card in statisticsCards" :key="card.title">
        <el-card class="statistics-card">
          <div class="card-content">
            <el-icon class="card-icon" :class="card.type">
              <component :is="card.icon" />
            </el-icon>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>人员分布</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里将添加echarts图表 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>工资趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里将添加echarts图表 -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  User,
  Calendar,
  Money,
  TrendCharts
} from '@element-plus/icons-vue'

const statisticsCards = ref([
  {
    title: '总人数',
    value: '128',
    icon: User,
    type: 'primary'
  },
  {
    title: '本月考勤',
    value: '98%',
    icon: Calendar,
    type: 'success'
  },
  {
    title: '平均工资',
    value: '￥8,562',
    icon: Money,
    type: 'warning'
  },
  {
    title: '增长率',
    value: '+15%',
    icon: TrendCharts,
    type: 'danger'
  }
])
</script>

<style scoped>
.dashboard-overview {
  padding: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  font-size: 48px;
  margin-right: 16px;
}

.card-icon.primary {
  color: #409EFF;
}

.card-icon.success {
  color: #67C23A;
}

.card-icon.warning {
  color: #E6A23C;
}

.card-icon.danger {
  color: #F56C6C;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.charts-row {
  margin-top: 20px;
}

.chart-card {
  height: 400px;
}

.chart-header {
  font-size: 16px;
  font-weight: bold;
}

.chart-container {
  height: 320px;
}
</style> 